class Sweep {
  constructor(size) {
    this._size = size
    this.dots = []
    this.baseArr = []
    this.number = []
    this.spanDom = ''
    this.right = size,
    this.left = size * (size - 1)
  }
  
  init() {
    this.number = new Array(this._size * this._size).fill(0)
    this.getRandomDot()
    this.getSweepNumber()
    this.removeElement()
    this.createElement()
    window.oncontextmenu=function(e){
      //取消默认的浏览器自带右键 很重要！！
      e.preventDefault();
    }
  }

  removeElement() {
    if(!!document.getElementById('box').childNodes[7]) {
      console.log(document.getElementById('box').childNodes[7])
      document.getElementById('box').removeChild(document.getElementById('box').childNodes[7])
    }
  }

  createElement() {
    for (let i = 0; i < this._size*this._size; i++) {
      const domId = i % this._size + '_' + Math.floor(i / this._size)
      this.spanDom += `<span id="${domId}" class="clickElment"></span>`
    }
    let ele = `<div class="container" style="width: ${this._size * 22}px">${this.spanDom}</div>`
    let box = document.createElement('div')
    box.innerHTML = ele
    document.getElementById('box').appendChild(box)
    this.addEventForBtn()
  }

  addEventForBtn() {
    let sweep = document.querySelector('.container')
    let _this = this
    sweep.addEventListener('mousedown', function(event) {
      console.log(event.target.nodeName == 'SPAN')
      if(event.target.nodeName == 'SPAN') {
        if(event.button == 0) {
          _this.leftKeyDown(event.target.id)
        } else if (event.button == 2) {
          _this.rightKeyDown(event.target.id)
        }
      }
    })
  }

  leftKeyDown(id) {
    if(this.baseArr.includes(id)) {
      this.showAll()
      document.querySelector('.result').innerHTML = '挑战失败'
    }
    else {
      let x = parseInt(id.split('_')[0])
      let y = parseInt(id.split('_')[1])
      document.getElementById(id).innerHTML = this.number[y * this._size + x]
      this.left --
    }
    if(this.left === 0) {
      this.showAll()
      document.querySelector('.result').innerHTML = '挑战成功'
    }
  }

  rightKeyDown(id) {
    // if()
    if((document.getElementById(id).style.borderColor) == '') 
      document.getElementById(id).style.borderColor = '#f00'
    else document.getElementById(id).style.borderColor = ''
  }

  showAll() {
    for (let i = 0; i < this._size * this._size; i++) {
      const domId = i % this._size + '_' + Math.floor(i / this._size)
      if(this.baseArr.includes(domId)) document.getElementById(domId).innerHTML = '雷'
      else document.getElementById(domId).innerHTML = this.number[i]
    }
  }

  /**
   * 获取各点显示的值
   */
  getSweepNumber() {
    this.dots.forEach(element => {
      const x = element[0], y = element[1]
      let dotlist = [
        x + '_' + (y - 1),
        x + '_' + (y + 1),
        (x - 1) + '_' + (y - 1),
        (x - 1) + '_' + y,
        (x - 1) + '_' + (y + 1),
        ( x + 1) + '_' + (y - 1),
        ( x + 1) + '_' + y,
        ( x + 1) + '_' + (y + 1)
      ]
      dotlist.forEach(el => {
        if(el.indexOf('-') == -1) {
          let a = parseInt(el.split('_')[0]),
            b = parseInt(el.split('_')[1])
            if (a < this._size && b < this._size)
              this.number[b * this._size + a] ++
        }
      });
    });
  }

  /**
   * 获取随机点
   */
  getRandomDot() {
    while ( this.dots.length < this._size ) {
      let { x, y } = this.random()
      let key = x.toString() + '_' + y.toString()
      !this.baseArr.includes(key) && this.dots.push([x, y])  && this.baseArr.push(key)
    }
  }
  
  random() {
    return {
      x: Math.floor( Math.random() * this._size ),
      y: Math.floor( Math.random() * this._size )
    }
  }

  dotsToString() {
    this.init()
    console.log(this.dots)
    console.log(this.number)
  }
}

// let s = new Sweep(4)
// s.dotsToString()